<template>
        <div>
                <div class="topp">
                        <p>爆爆团</p>
                        <p>限时爆款，超级低价</p>
                </div>
                <div class="top">
                        <div class="top1">
                                <span v-for="(item,index) in list1"
                                      :key="index"
                                      @click="funb(index)">{{item}}</span>
                        </div>
                        <div class="top2">
                                <div v-for="(item,index) in shoplist"
                                     :key="index"
                                     class="top3">
                                        <div class="top4">
                                                <img :src="item.picture"
                                                     alt="">
                                        </div>
                                        <div class="top5">
                                                <p>{{item.name}}</p>
                                                <p>{{item.promotion_info}}</p>
                                                <div class="top6">
                                                        <div class="top7">
                                                                <!-- <p>{{item.span}}</p> -->
                                                                <p>￥{{item.min_price
}}</p>
                                                                <!-- <s>{{item.sahnchu}}</s> -->

                                                        </div>
                                                        <div class="top8">
                                                                <div @click="fun(item1)"
                                                                     v-for="(item1,index) in list"
                                                                     :key="index">{{item1.yiqiang? '已抢': '马上抢'}}</div>
                                                                <p>{{item.month_saled_content
}}</p>
                                                        </div>
                                                </div>

                                        </div>

                                </div>
                        </div>
                </div>
        </div>
</template>

<script>
// import axios from 'axios'
import { tuan_list } from '../../utils/api'
export default {
        data () {
                return {

                        list1: ["正在抢购", "即将开始"],
                        shoplist: [],
                        list: [{ yiqiang: false }]

                }
        },
        methods: {
                fun (item1) {
                        item1.yiqiang = true;


                },
                funb (index) {
                        tuan_list({ status: 1 }).then((ok) => {
                                console.log(ok.data);
                                this.shoplist = ok.data.list;
                        })
                }
        },
        // mounted () {
        //         tuan_list({ status: 1 }).then((ok) => {
        //                 console.log(ok.data);
        //                 this.shoplist = ok.data.list;
        //         })
        // }
        // mounted () {
        //         axios.get('/api/shop/list').then((ok) => {
        //                 console.log(ok)
        //                 this.shoplist = ok.data.list;
        //         })

        // }


}
</script>

<style lang="scss" scoped>
.topp {
        width: 100%;
        height: 200px;
        background-color: orangered;
        > p:nth-child(1) {
                text-align: center;
                color: white;
                font-size: 21px;
                font-weight: bold;
                padding: 10px 0;
        }
        > p:nth-child(2) {
                text-align: center;
                color: white;
                font-size: 30px;
                font-weight: bold;
                padding: 20px 0;
        }
}

.top .top1 {
        width: 100%;
        height: 40px;
        background-color: orangered;
        padding: 0 10px;
        box-sizing: border-box;
        > span {
                color: white;
                margin-right: 20px;
                text-align: center;
                line-height: 40px;
        }
}
.top2 {
        width: 100%;
        background-color: #f5f5f5;
        > .top3 {
                width: 100%;
                margin: auto;
                background-color: white;
                padding: 10px;
                box-sizing: border-box;
                margin-bottom: 15px;
                display: flex;
                justify-content: space-between;
                > .top4 {
                        width: 150px;
                        height: 110px;
                        // padding-right: 10px;
                        // box-sizing: border-box;

                        > img {
                                width: 100%;
                                height: 110px;
                        }
                }
        }
}
.top6 {
        display: flex;
        justify-content: space-between;
}
.top5 {
        margin-left: 15px;
}
.top5 p:nth-child(1) {
        font-size: 17px;
        font-weight: bold;
}
.top5 p:nth-child(2) {
        font-size: 13px;
        color: #777;
}
.top7 p {
        margin-bottom: 5px;
}
.top7 p:nth-child(1) {
        font-size: 13px;
        color: red;
}
.top7 p:nth-child(2) {
        font-size: 19px;
        color: red;
}
.top7 p:nth-child(3) {
        font-size: 13px;
        color: #777;
}

.top8 div {
        width: 80px;
        height: 30px;
        background-color: orangered;
        color: white;
        text-align: center;
        line-height: 30px;
        border-radius: 20px;
}
.top8 p:nth-child(2) {
        font-size: 8px;
        color: red;
        margin-top: 5px;
        margin-left: 13px;
}
</style>